<template>
	<view>
		<view class="info">
			<addressSelect></addressSelect>
			<view class="goodsinfo">
				<view class="goodsimage">
					<u-image width="100%" height="100%" border-radius="10" mode="widthFix"
						:src='goodsInfo.productCover'></u-image>
				</view>
				<view class="goodstext">
					<view class="goodname">{{goodsInfo.productVariety}}</view>
					<view class="goodother">单价：{{goodsInfo.productPrice}}元/kg</view>
					<view class="goodother">地区：{{goodsInfo.productProductionArea}}</view>
					<view class="goodother">上货日期：{{goodsInfo.createTime}}</view>
				</view>
			</view>
		</view>
		<view class="goodsneed">
			<view class="need">产品需求</view>
			<u-form :model="needinfo" ref="orderForm" class="needinfo">
				<view class="needwidth">
					<u-form-item label="重量(kg)" label-width='150' prop="weight" :label-style="{'height':'30rpx'}">
						<u-input v-model="needinfo.weight" type="text" height="30"></u-input>
					</u-form-item>
					<u-form-item label="备注" label-width='120' prop="remark">
						<u-textarea v-model="needinfo.remark" :autoHeight="true" />
						</u-textarea>
					</u-form-item>
				</view>
			</u-form>
			<button class="custom-style" shape="circle" @click="placeorder">下单</button>
		</view>
		<!-- 弹窗签字 -->
		<sign v-model="showSign" @getsign="getSign"></sign>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	import sign from 'components/sign/signwx.vue';
	import orderRules from "utils/verify/orderRules.js"
	import {
		pathToBase64
	} from 'utils/image.js'
	import addressSelect from "components/address/addressSelect"
	import {
		placeOrder
	} from 'apis/farmer/goods.js';

	export default {
		components: {
			sign,
			addressSelect
		},
		computed: {
			...mapGetters(['getDefaultAddress'])
		},
		data() {
			return {
				showSign: false,
				mysign: '',
				goodsInfo: {
					// productCover
					// productPrice
					// productProductionArea
					// createTime
					// productVariety
				},
				needinfo: {
					weight: '', //重量
					remark: '' // 备注
				},
				from: {
					addressUUId: '',
					goodsUUId: '',
					base64: '',
					kilogram: '', //重量
					remark: '', // 备注
					type: 0, // 类型
				},
				// rules: orderRules
			}
		},

		methods: {
			async getSign(signdata) { //得到签名后提交订单
				this.showSign = false
				const bs = await pathToBase64(signdata)
				let data = {
					'buyerContactInfoId':this.getDefaultAddress.id, // 买家联系信息id
					'productId':this.goodsInfo.goodsId, //产品的id
					'buyerSignature':bs,//买家的签名 base64
					'orderWeight': this.needinfo.weight, //下单重量
					'remark': this.needinfo.remark, //备注
					'type': this.from.type, //类型
				}
				this.$refs.orderForm.validate().then(async () => {
					console.table(data)
					const {
						code,
						msg
					} = await placeOrder(data)
					if (code !== 200) return this.$errorMsg(msg);
					this.$successMsg("下单成功")
					setTimeout(this.goback, 1000)
				})
			},

			async placeorder() { //验证规则
				const valid = await this.$refs.orderForm.validate()
				if (!valid) return null
				this.showSign = true
			}

		},
		onReady() { //生命周期
			this.$refs.orderForm.setRules(orderRules);

		},
		onLoad() {
			this.goodsInfo = this.$Route.query
			console.log(this.goodsInfo)
			console.log("getDefaultAddress",this.getDefaultAddress)
		}
	}
</script>

<style>
	@import url("place_order.css");
</style>
